<!-- 24、25、26、27、28-->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      group="changePortAttribute"
      class="bottom-wrap"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
      >
        <a-form-item :label="$t('T9_shopId')" name="shopId">
          <a-select
					v-model:value="queryForm.shopId"
					:placeholder="$t('common_pleaseSelect')"
					class="select-width"
				>
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_bayId')" name="bayId">
          <a-select v-model:value="queryForm.bayId" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.bayIdList"
            :key="item" :value="item">
            {{item}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_eqpId')" name="eqpId">
          <a-select v-model:value="queryForm.eqpId" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.eqpIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
    </t-query-form>
    <div class="page-wrap-main">
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">
          {{ $t('T9_eqpInfo') }}
          <a-button v-if="eqpInfoList.collapse" type="primary" @click="eqpInfoList.collapse=false">+</a-button>
          <a-button v-else @click="eqpInfoList.collapse=true">-</a-button>
        </a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button>{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <t-table
        v-show="!eqpInfoList.collapse"
        class="page-wrap-main-table"
        :data="eqpInfoList.tableData"
        :loading="eqpInfoList.loading"
      >
        <t-column field="bayId" :title="$t('T9_bayId')" />
        <t-column field="eqpId" :title="$t('T9_eqpId')" />
        <t-column field="eqpIdDes" :title="$t('T9_eqpIdDes')" />
        <t-column field="machineState" :title="$t('T9_machineState')" />
        <t-column field="operationMode" :title="$t('T9_operationMode')" />
        <t-column field="lastEventUser" :title="$t('T9_lastEventUser')" />
        <t-column field="lastEventUserDes" :title="$t('T9_lastEventUserDes')" />
        <t-column field="recipeName" :title="$t('T9_recipeName')" />
        <t-column field="i/fMode" :title="$t('T9_i/fMode')" />
        <t-column field="eqpHoldState" :title="$t('T9_eqpHoldState')" />
      </t-table>
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">
          {{ $t('T9_portInfoList') }}
          <a-button v-if="portInfoList.collapse" type="primary" @click="portInfoList.collapse=false">+</a-button>
          <a-button v-else @click="portInfoList.collapse=true">-</a-button>
        </a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button>{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <t-table
        v-show="!portInfoList.collapse"
        class="page-wrap-main-table"
        :data="portInfoList.tableData"
        :loading="portInfoList.loading"
      >
        <t-column type="checkbox" width="60"></t-column>
        <t-column field="portId" :title="$t('T9_portId')" />
        <t-column field="portState" :title="$t('T9_portState')" />
        <t-column field="portType" :title="$t('T9_portType')" />
        <t-column field="transferState" :title="$t('T9_transferState')" />
        <t-column field="accessMode" :title="$t('T9_accessMode')" />
        <t-column field="portUseType" :title="$t('T9_portUseType')" />
        <t-column field="cstId" :title="$t('T9_cstId')" />
        <t-column field="productType" :title="$t('T9_productType')" />
        <t-column field="state" :title="$t('T9_state')" />
        <t-column field="loadAccessMode" :title="$t('T9_loadAccessMode')" />
        <t-column field="unloadAccessMode" :title="$t('T9_unloadAccessMode')" />
      </t-table>
      <div class='data-form page-wrap-main-bottom'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
          <a-form-item :label="$t('T9_toChange')" name="toChange">
            <a-select v-model:value="dataForm.toChange" class="select-width">
              <a-select-option v-for="item in options.toChangeList"
              :key="item.value" :value="item.value">
              {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_newTransferState')" name="newTransferState">
            <a-select v-model:value="dataForm.newTransferState" class="select-width">
              <a-select-option v-for="item in options.newTransferStateList"
              :key="item.value" :value="item.value">
              {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_comment')" name="comment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.comment" />
              </a-col>
              <a-col :span="2">
                <a-button type="primary" @click="showConfirm">{{ $t('t9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <ModalPasswordConfirm v-model:value="visible" @ok="handleOk"/>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import ModalPasswordConfirm from '@/components/ModalPasswordConfirm.vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { shopIdList } from '@/views/options'

  export default defineComponent({
    name: 'ChangePortAttribute',
    components: { ModalPasswordConfirm },
    mixins: [initOptionsMixin],
    data() {
      return {
        visible: false,
        searchBtnLoading: false,
        eqpInfoList: {
          loading: false,
          collapse: false,
          tableData: [],
          basicParams: {
            queryId: 'GetMachineInfo',
            version: '80002',
            dtoName: '',
            menuName: '',
            usage: ''
          }
        },
        portInfoList: {
          loading: false,
          collapse: false,
          tableData: [],
          basicParams: {
            queryId: 'GetPortInfo',
            version: '80003',
            dtoName: '',
            menuName: '',
            usage: ''
          }
        },
        queryForm: {
          shopId: 'ARRAY',
          bayId: undefined,
          eqpId: undefined
        },
        options: {
          shopIdList,
          eqpIdList: [],
          bayIdList: [],
          toChangeList: [],
          newTransferStateList: []
        },
        dataForm: {
          toChange: undefined,
          newTransferState: undefined,
          comment: ''
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          bayId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          eqpId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          toChange: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          newTransferState: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          comment: [
            { required: true, message: this.$t('valid_required'), trigger: 'blur' },
            { max: 500, message: this.$t('changePoint_maxLength', { n: 500 }), trigger: 'blur' }
          ]
        }
      }
    },
    computed: {

    },
    created() {
      this.initOptions([{ name: 'bayId', params: { shopId: this.queryForm.shopId } }])
      this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: '', version: '80024' } }])
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.queryForm.bayId = undefined
          this.queryForm.eqpId = undefined
          this.initOptions([{ name: 'bayId', params: { shopId } }])
          this.initOptions([{ name: 'eqpId', params: { shopId, bayId: '', version: '80024' } }])
        }
      },
      'queryForm.bayId': {
        handler(bayId) {
          this.queryForm.eqpId = undefined
          this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: bayId || '', version: '80024' } }])
        }
      }
    },
    methods: {
      getTableList(type = 'eqpInfo') {
        this[`${type}List`].loading = true
        const params = { ...this[`${type}List`].basicParams, ...this.queryForm }
        return api
          .getList(params)
          .then((res) => {
            this[`${type}List`].loading = false
            this[`${type}List`].tableData = res || []
          })
          .catch((error) => {
            this[`${type}List`].loading = false
            console.error(error)
          })
      },
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            this.searchBtnLoading = true
            Promise.allSettled([
              this.getTableList('eqpInfo'),
              this.getTableList('portInfo')
            ]).then(() => {
              this.searchBtnLoading = false
            }).catch((error) => {
              this.searchBtnLoading = false
              console.error(error)
            })
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
      showConfirm() {
        this.$refs.dataForm.validate().then(() => {
          this.visible = true
        }).catch((error) => {
          console.log('error', error)
        })
      },
      handleOk() {
        this.visible = false
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 140px;
}
</style>
